<style>
    div[m-id="{{mId}}"] {
        width: 100%;
        height: 100%;
        position: relative;
    }

    div[m-id="{{mId}}"] > .progress {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 3px;
        border-radius: 0;
        display: none;
        margin: 0 !important;
    }

    div[m-id="{{mId}}"] > .progress > .bar {
        height: 100%;
        border-radius: 0;
    }

    html[data-bs-theme=light] div[m-id="{{mId}}"] > .progress > .bar {
        background-color: #fff !important;
    }

    html[data-bs-theme=dark] div[m-id="{{mId}}"] > .progress > .bar {
        background-color: #1e1e1e !important;
    }

    div[m-id="{{mId}}"] > .progress > .bar::before {
        border-radius: 0;
    }

    html[data-bs-theme=light] div[m-id="{{mId}}"] > .progress > .bar::before {
        background-color: var(--app-light-color);
    }

    html[data-bs-theme=dark] div[m-id="{{mId}}"] > .progress > .bar::before {
        background-color: var(--app-dark-color);
    }

    div[m-id="{{mId}}"] > .folder-title {
        position: absolute;
        top: 3px;
        left: 0px;
        right: 0px;
        height: 24px;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        border: 1px solid;
        border-color: transparent;
        padding: 0 1px;
    }

    html[data-bs-theme=light] div[m-id="{{mId}}"] > .folder-title:focus {
        background: #d7daeb;
    }

    html[data-bs-theme=dark] div[m-id="{{mId}}"] > .folder-title:focus {
        background: #5a5959;
    }

    div[m-id="{{mId}}"] > .folder-title > * {
        line-height: 24px;
        opacity: 0.8;
    }

    div[m-id="{{mId}}"] > .folder-title > .mixly-icon.triangle {
        font-size: 15px !important;
    }

    div[m-id="{{mId}}"] > .folder-title > .mixly-icon.folder:before {
        margin: 0 0.2em;
    }

    div[m-id="{{mId}}"] > .folder-title > .name {
        font-family: Segoe WPC,Segoe UI,Microsoft YaHei,sans-serif;
        font-size: 12px !important;
        padding-left: 2px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    div[m-id="{{mId}}"] > .children {
        position: absolute;
        top: 27px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        display: none;
    }

    div[m-id="{{mId}}"] > .children .jstree,
    div[m-id="{{mId}}"] > .children .jstree-container-ul {
        width: 100%;
    }

    div[m-id="{{mId}}"] .jstree-container-ul > .jstree-node {
        margin-left: 8px;
    }

    div[m-id="{{mId}}"] .jstree-node > .jstree-wholerow {
        border: 1px solid;
        border-color: transparent;
    }

    html[data-bs-theme=light] div[m-id="{{mId}}"] > .folder-title.active,
    html[data-bs-theme=light] div[m-id="{{mId}}"] .jstree-node.active > .jstree-wholerow {
        border-color: var(--app-light-color) !important;
    }

    html[data-bs-theme=dark] div[m-id="{{mId}}"] > .folder-title.active,
    html[data-bs-theme=dark] div[m-id="{{mId}}"] .jstree-node.active > .jstree-wholerow {
        border-color: var(--app-dark-color) !important;
    }

    div[m-id="{{mId}}"] > .mask {
        position: absolute;
        inset: 0;
        background-color: transparent;
        z-index: 1;
        display: none;
    }
</style>
<div m-id="{{mId}}">
    <div class="ui swinging indeterminate progress">
        <div class="bar"></div>
    </div>
    <button type="root" class="folder-title layui-btn layui-btn-xs layui-btn-primary">
        <i class="mixly-icon triangle codicon-chevron-right"></i>
        <i class="mixly-icon folder foldericon-root-default"></i>
        <p class="name"></p>
    </button>
    <div class="children"></div>
    <div class="mask"></div>
</div>